/* tslint:disable:no-console */
import MultiPicker from '../MultiPicker';
import Picker from '../NativePicker.android';
import React from 'react';
import { View } from 'react-native';

export default class MultiPickerDemo extends React.Component{
  state = {
    value: ['1', '11'],
  };

  onChange = (value) => {
    this.setState({
      value,
    });
    console.log('onChange',value)
  }

  render() {
    return (
      <View style={{ borderWidth: 2, padding: 10 }}>
        <MultiPicker
          style={{
            flexDirection: 'row' ,
            alignItems: 'center',
            paddingTop: 10,
            paddingBottom: 10,
          }}
          selectedValue={this.state.value}
          onValueChange={this.onChange}
        >
          <Picker style={{ flex: 1 }}>
            <Picker.Item value="1" label={'one'}/>
            <Picker.Item value="2" label={'two'}/>
            <Picker.Item value="3" label={'three'}/>
            <Picker.Item value="4" label={'four'}/>
            <Picker.Item value="5" label={'five'}/>
            <Picker.Item value="6" label={'six'}/>
            <Picker.Item value="7" label={'seven'}/>
            <Picker.Item value="8" label={'eight'}/>
          </Picker>
          <Picker style={{ flex: 1 }}>
            <Picker.Item value="11" label={'nine'}/>
            <Picker.Item value="12" label={'ten'}/>
            <Picker.Item value="13" label={'eleven'}/>
            <Picker.Item value="14" label={'twelve'}/>
            <Picker.Item value="15" label={'thirteen'}/>
            <Picker.Item value="16" label={'fourteen'}/>
            <Picker.Item value="17" label={'fifteen'}/>
            <Picker.Item value="18" label={'sixteen'}/>
          </Picker>
        </MultiPicker>
      </View>
    );
  }
}

